<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向数据绑定</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <input type="text" v-model='msg'>
        <!-- 复选框单选 -->
        <label for='checkbox'>{{checked}}</label>
        <input type="checkbox" id="checkbox" v-model='checked'>
        <!-- 选中的添加到数组 -->
        <div class="box">
            <label for='a'>黄瓜</label>
            <input type="checkbox" id="a" value="黄瓜" v-model="checkedNames">

            <label for='b'>西红柿</label>
            <input type="checkbox" id="b" value="西红柿" v-model="checkedNames">

            <label for='c'>芸豆</label>
            <input type="checkbox" id="c" value="芸豆" v-model="checkedNames">

            </div>
        <br/>
        <span>{{checkedNames}}</span>
        <br/>
        <!-- 用v-for渲染动态选项 -->
        <select v-model='selected'>
            <option v-for='option in options' v-bind:value='option.value'>
                {{option.text}}
            </option>
        </select>
        <span>Selected:{{selected}}</span>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:"小胖子",
                checked:false,
                checkedNames:[],
                selected:'A',
            options:[
                {text:'One',value:'A'},
                {text:'Two',value:'B'},
                {text:'Three',value:'C'}
            ]
            },
           
        });
    </script>
</body>
</html>